Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat use layout #223

Merged
merged 2 commits into from
Dec 18, 2023
Merged

Feat use layout #223

merged 2 commits into from
Dec 18, 2023

Conversation

winixt
Copy link
Collaborator

@winixt winixt commented Dec 18, 2023

layout 添加 useLayout api, 并暴露 closeTab 方法。

What kind of change does this PR introduce? (check at least one)

  • Feature

Does this PR introduce a breaking change? (check one)

  • No

"@fesjs/utils": "^3.0.1",
"@vueuse/core": "^10.7.0"
},
"typings": "./types.d.ts"
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码的主要变动如下:

  1. 添加了一个新的依赖项:"@vueuse/core": "^10.7.0"。
  2. 调整了部分字段的顺序,例如将"name"字段移至开头,将"dependencies"字段放在"peerDependencies"字段之后。
  3. 删除了不必要的字段:"scripts"中的"test"命令。
  4. 格式化了代码,更好地保持了字段的对齐和缩进。

代码看起来没有明显的错误风险。推荐的改进:

  • 在提交代码补丁之前,最好进行更全面的测试以确保没有引入新的问题。
  • 可以添加更详细的文档说明,特别是关于使用该插件的配置示例或特定注意事项。
  • 如果可能的话,可以在代码提交前进行代码审查,以获取其他团队成员的反馈和建议。

@@ -102,7 +102,7 @@ export default (api) => {
},
});
}
if (!routes.find((item) => item.path === '/404')) {
if (!routes.find(item => item.path === '/404')) {
routes.push({
path: '/404',
name: 'Exception404',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

以下是代码补丁,请帮我进行简要的代码审查。欢迎指出任何错误风险和/或改进建议。:

@@ -1,5 +1,5 @@
-import { readFileSync } from 'fs';
-import { join } from 'path';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { winPath } from '@fesjs/utils';
 import { name } from '../package.json';

@@ -40,7 +40,7 @@ export default (api) => {

         const iconNames = helper.getIconNamesFromMenu(userConfig.menus);

-        const iconsString = iconNames.map((iconName) => `import { ${iconName} } from '@fesjs/fes-design/icon'`);
+        const iconsString = iconNames.map(iconName => `import { ${iconName} } from '@fesjs/fes-design/icon'`);
         api.writeTmpFile({
             path: join(namespace, 'icons.js'),
             content: `
@@ -84,15 +84,15 @@ export default (api) => {

     api.addPluginExports(() => [
         {
-            specifiers: ['Page', 'useTabTitle'],
+            specifiers: ['Page', 'useTabTitle', 'useLayout'],
             source: join(namespace, 'index.js'),
         },
     ]);

     // 把 BaseLayout插入到路由配置中,作为根路由
     // 添加 403 和 404 路由
     api.modifyRoutes((routes) => {
-        if (!routes.find((item) => item.path === '/403')) {
+        if (!routes.find(item => item.path === '/403')) {
             routes.push({
                 path: '/403',
                 name: 'Exception403',
@@ -102,7 +102,7 @@ export default (api) => {
                 },
             });
         }
-        if (!routes.find((item) => item.path === '/404')) {
+        if (!routes.find(item => item.path === '/404')) {
             routes.push({
                 path: '/404',
                 name: 'Exception404',

这段代码补丁主要做了以下更改:

  1. 替换了 import 语句中的文件系统模块引用,改用 node:fsnode:path
  2. 优化了导入图标的部分代码,使用箭头函数简化了回调函数。
  3. 在 addPluginExports 中添加了 useLayout 到插件的导出配置。
  4. 修改了路由配置,如果路由中不存在 /403 路径,则添加一个名为 Exception403 的路由;同样地,如果路由中不存在 /404 路径,则添加一个名为 Exception404 的路由。

对于这段代码补丁的风险和改进建议,没有明显的错误风险。改进方面,可以考虑增加一些注释来解释代码的目的和功能。此外,处理错误的逻辑可能需要更详细的实现,具体取决于代码的上下文。

@@ -1,2 +1,3 @@
export { default as Page } from './views/page.vue';
export { useTabTitle } from './useTitle';
export * from './useLayout';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码看起来很简单,只有两行。第一行导出了一个名为"Page"的默认组件,从"./views/page.vue"文件中引入。第二行导出了一个名为"useTabTitle"的函数,从"./useTitle"文件中引入。

新增加的第三行是导出"./useLayout"中的所有内容。

在这个简短的代码片段中,我没有发现任何明显的错误风险。如果代码的其他部分也正确,那么这应该是一个有效的代码补丁。

关于改进建议,由于这段代码非常简洁,很难提出具体的优化建议。如果你愿意提供更多上下文或与该代码片段相关的其他信息,我可能能够提供更具体的帮助和建议。

return state;
}

export const useLayout = createSharedComposable(_useLayout);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提供的代码补丁的目的是创建一个名为useLayout的共享组合函数,并使用Vue生态中的库实现。以下是对代码补丁的简要代码审查:

  1. 导入语句(import)非常标准,没有问题。
  2. _useLayout 函数使用了 shallowReactive 方法来创建一个浅响应式对象,并初始化了一个 closeTab 函数。
  3. 代码使用了 createSharedComposable 方法从 _useLayout 中创建了共享组合函数。
  4. 最后将 useLayout 导出。

该代码补丁的风险和改进建议如下:

  • 风险:

    • 这段代码没有明显的错误或潜在的风险,它符合Vue生态系统的推荐做法。
  • 改进建议:

    • 考虑添加必要的注释,以便将来能够更好地理解代码的意图。
    • 如果适用,考虑添加对每个功能的单元测试,以验证其行为是否符合预期。
    • 确保在项目的其他部分正确导入和使用 useLayout 组合函数。

请注意,由于限制回答长度,上述内容仅提供了简要审核和一些建议。实际上,代码审核应基于更多上下文信息和具体项目要求进行。

const route = useRoute();
const titleRef = ref(title);
const path = route.path;

cache.set(path, titleRef);

return titleRef;
};
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码补丁如下,请帮我简要进行代码审核。欢迎提出任何缺陷风险和/或改进建议:

  1. 在第 3、5、9、14 行中将箭头函数的参数括号删除,因为它们只有一个参数。
  2. export const deleteTitleexport const useTabTitle 中的函数表达式改为函数声明。在第 7 和第 12 行,将箭头函数表达式替换为以 "function" 关键字开头的函数声明。这样可以提高代码可读性,并使其与其他函数声明保持一致。
  3. 在静态检查方面,没有明显的错误或潜在的 bug 风险。

修复后的代码如下所示:

import { useRoute } from '@@/core/coreExports';

const cache = reactive(new Map());

export function getTitle(path) {
    return cache.get(path);
}

export function deleteTitle(patch) {
    return cache.delete(patch);
}

export function useTabTitle(title) {
    const route = useRoute();
    const titleRef = ref(title);
    const path = route.path;

    cache.set(path, titleRef);

    return titleRef;
}

请留意代码风格和文档注释等方面是否符合项目约定。

@@ -163,6 +170,7 @@ export default {
},
};
</script>

<style lang="less">
.layout-content-tabs {
background: rgb(255, 255, 255);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码补丁存在以下问题和改进建议:

  1. :modelValue改为:model-value,将:tabsPadding改为:tabs-padding

  2. <Page v-else />修改为<Page v-if="!multiTabs" />,以便条件渲染。

  3. import语句中的@fesjs/fes-design@fesjs/fes-design/icon模块之间添加空行。

  4. 将两个import语句中的{ transTitle }{ useLayout }调整到文件顶部,与其他命名导入放在一起。

  5. 使用箭头函数简化findPage方法的实现:const findPage = (path) => pageList.value.find(item => unref(item.path) === unref(path));

  6. handleCloseTab方法首部使用 targetKey = targetKey || route.path; 语句进行参数默认值赋值。

  7. 在方法定义前面增加函数注释说明其作用。

  8. created生命周期下,设置layoutState.closeTab = handleCloseTab;,以确保该方法可供外部访问。

  9. 移除无用的变量 let i = 0;,因为它没有被使用。

以上是关于提供的代码补丁的简要代码审查。我希望这些建议能够帮助您改进代码。

const editorRef = ref();
const json = ref('');
const language = ref('json');
onMounted(() => {
setTimeout(() => {
language.value = 'html';
}, 2000);
setTimeout(() => {
closeTab();
}, 3000);
});
return {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码补丁进行了如下的更改和添加:

  1. 模板部分:

    • 替换了<monaco-editor>标签为<MonacoEditor>标签。
    • 添加了显示json变量的内容。
  2. 配置部分:

    • 添加了一个配置块,其中包含了名为nametitle的属性。
  3. 脚本部分:

    • 导入了@fesjs/fes库中的MonacoEditor组件和useLayout函数。
    • setup函数中,通过调用useLayout函数获得了closeTab方法。
    • 定义了一个名为editorRef的引用变量。
    • 定义了一个名为json的响应式变量,初始值为空字符串。
    • 定义了一个名为language的响应式变量,初始值为'json'
    • onMounted钩子函数中,添加了两个定时器:
      • 第一个定时器在2秒后将language的值设置为'html'
      • 第二个定时器在3秒后调用closeTab方法。
    • 返回editorRefjsonlanguage变量。

在进行代码审核时,以下是可能存在的问题和改进建议:

  • 引用命名:可以使用更具描述性的名称来标识引用变量,例如将editorRef修改为monacoEditorRef或类似的名称。
  • 未使用的导入:脚本中导入的MonacoEditor并没有在组件中使用到,可能需要确保其用途或是否可以移除。
  • 配置块位置:配置块位于模板之后,但它通常应该位于脚本之前。请验证是否放置在正确的位置。
  • 定时器使用情况:请确保定时器的使用符合实际需求,并且在删除或修改代码时要特别注意它们的影响。
  • 缺少函数注释:提供一些简要的注释说明,来解释每个函数和代码块的目的和功能。

以上是对代码补丁的简要评审,希望对您有所帮助!

router.push('/editor');
};
}
</script>

<style>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提供的代码补丁已经在模板和脚本部分进行了修改。以下是对代码的简洁审核和改进建议:

  1. 模板部分:

    • <FButton> 组件中,将按钮文本 "Button" 放置在新的行内,以提高可读性。
  2. 脚本部分:

    • go 函数可以改为使用函数声明语法 function go() { ... }
    • ; 分号可从函数体的末尾删除,因为它不是必需的。

总体而言,这些是较小的更改,没有明显的错误风险。可以考虑添加更多功能,如输入验证或错误处理,具体取决于代码的上下文和要求。

dependencies:
vue: 3.2.47
dev: false

/[email protected]([email protected]):
resolution: {integrity: sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==}
engines: {node: ^14.17.0 || >=16.0.0}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在这个代码补丁中,有一些需要注意的地方:

  1. 导入器(importers)部分:

    • @vueuse/core 被添加到了依赖中,并指定了版本号为 10.7.0。需要确保该版本与当前项目兼容,并没有潜在的兼容性问题。
    • @fesjs/utils 的 version 值应该是 "^3.0.1",而不是链接(link:../fes-utils)。请确认这是一个正确的引入方式。
  2. packages 部分:

    • 添加了关于 @types/web-bluetooth 的两个不同解析版本。需要确认是否需要同时使用这两个版本,以及该变更是否会引发潜在的冲突。如果不需要两个版本,建议移除其中一个,也可移除其中一个的"dev"属性。
    • /@vueuse/[email protected]([email protected])/@vueuse/[email protected]([email protected]) 是相同的软件包,只是版本号不同。确认是否需要同时使用这两个版本,并确保没有潜在的冲突。
  3. /@vueuse/[email protected]([email protected]) 是一个新加入的软件包。确认它与现有代码的兼容性,并验证是否需要添加此软件包作为依赖。

  4. browserslistcaniuse-lite 模块的版本号发生了更改。请确保新版本的这些模块不会对项目中的其他部分造成影响,并验证是否需要更新。

上述是代码补丁的主要问题和注意事项,可以基于此进行进一步的代码审查和测试以确定是否存在其他错误或改进的机会。

@wanchun wanchun merged commit 3223a20 into master Dec 18, 2023
2 checks passed
@wanchun wanchun deleted the feat-use-layout branch December 18, 2023 12:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants